<template>
    <!-- 右边部分 -->
    <el-container>
        <el-header>
            <el-card class="top">
                <div class="top-word">
                    资源动态
                </div>
            </el-card>
        </el-header>
        <el-main>
            <el-card class="main">
                <div class="main-container">
                    <el-row class="main-container-header">
                        <!-- 搜索框部分 -->
                        <el-col :span="6" class="aaa">
                            <el-input v-model="input1" size="default" placeholder=""
                                :prefix-icon="Search" />
                        </el-col>
                        <el-button class="main-container-btn " v-for="button in buttons" :key="button.text"
                            :type="button.type" text bg>
                            {{button.text }}</el-button>
                        <!-- form部分 -->
                        <!-- <el-col :span="8"> -->
                        <el-form :inline="true" :model="formInline" class="main-container-form">
                            <el-form-item label="资源类型">
                                <el-select v-model="formInline.region" placeholder="全部资源">
                                    <el-option label="作品" value="shanghai" />
                                    <el-option label="教程" value="beijing" />
                                    <el-option label="动态" value="beijing" />
                                    <el-option label="专题" value="beijing" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-select v-model="formInline.region" placeholder="全部">
                                    <el-option label="已发布" value="shanghai" />
                                    <el-option label="未发布" value="beijing" />
                                    <el-option label="审核中" value="beijing" />
                                    <el-option label="审核未通过" value="beijing" />
                                    <el-option label="仅主页可见" value="beijing" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <!-- </el-col> -->
                        <!-- 表格部分 -->
                        <el-table style="width: 100%" class="main-container-table">
                            <el-table-column label="内容" width="380" align="center" />
                            <el-table-column label="发布时间" align="center" />
                            <el-table-column label="数据" align="center" />
                            <el-table-column label="状态" align="center" />
                            <el-table-column label="操作" align="center" />
                        </el-table>
                    </el-row>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
// form绑定
const formInline = reactive({
    user: '',
    region: '',
})
const buttons = [
    { type: '', text: '搜索' },]

const input1 = ref('')
</script>

<style scoped>
.top-word{
    font-size: 14px;
}

.aaa /deep/ .el-input__wrapper{
    background-color: #f5f7fa;
}
/deep/ .el-table th.el-table__cell.is-leaf{
    background-color: #f5f7fa;
}
.main-container{
    height: 700px;
}
.main-container-btn {
    margin: 0 20px;
}

.main-container-table {
    margin: 10px 0;
    /* background-color: #f5f7fa; */
}
</style>